<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j"
	template="/layout/template-base.xhtml" contentType="text/html"
	markupType="xhtml">

	<ui:define name="content">
		
		<ui:include src="/user.xhtml" />
		
		<h:form>
			<s:decorate template="/layout/content.xhtml">
				<a:outputPanel rendered="#{gruposAction.listarGrupos}">
					<h:outputText value="#{messages['bands.table.title']}"
						styleClass="title color-orange" />
					<rich:panel styleClass="panel border-color-orange">
						<rich:dataTable columnClasses="data-table-cell" id="bandsTable"
							value="#{gruposAction.grupos}" styleClass="data-table"
							var="item" rows="10">
							<rich:column filterBy="#{item.nombre}">
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.nombre}" />
							</rich:column>
							<rich:column filterBy="#{item.tendencia}">
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.style']}" />
								</f:facet>
								<h:outputText value="#{item.tendencia}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.registration.date']}" />
								</f:facet>
								<h:outputText value="#{item.alta}">
									<s:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.leaving.date']}" />
								</f:facet>
								<h:outputText value="#{item.baja}">
									<s:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.actions']}" />
								</f:facet>
								<a:commandLink action="#{gruposAction.editar()}" styleClass="no-border" 
									rendered="#{usuario.perfil.administrador or usuario.perfil.gruposModificar}" reRender="base">
									<h:graphicImage value="/img/icons/16/edit.png" alt="#{messages['bands.actions.edit']}" title="#{messages['bands.actions.edit']}" />
									<f:setPropertyActionListener target="#{gruposAction.grupo}" value="#{item}" />
								</a:commandLink>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
	
					<rich:datascroller for="bandsTable" align="center"
						selectedStyleClass="border-color-orange color-orange"
						styleClass="top-margin" tableStyleClass="border-color-orange no-bg" />
				</a:outputPanel>
				<a:outputPanel rendered="#{gruposAction.editarGrupo}">
					<h:outputText value="#{messages['bands.edit.data']}"
						styleClass="title color-orange" />
					<h:panelGrid styleClass="panel border-color-orange" columns="4">
						
						<h:outputText value="#{messages['bands.edit.name']}" styleClass="color-orange" />
						<h:inputText value="#{gruposAction.grupo.nombre}" />
						
						<h:outputText value="#{messages['bands.edit.style']}" />
						<h:inputText value="#{gruposAction.grupo.tendencia}" />
						
						<h:outputText value="#{messages['bands.edit.registration.date']}" styleClass="color-orange" />
						<rich:calendar value="#{gruposAction.grupo.alta}" datePattern="dd/MM/yyyy" />
						
						<h:outputText value="#{messages['bands.edit.leaving.date']}" rendered="#{usuario.perfil.administrador or usuario.perfil.gruposEliminar}" />
						<rich:calendar value="#{gruposAction.grupo.baja}" datePattern="dd/MM/yyyy" rendered="#{usuario.perfil.administrador or usuario.perfil.gruposEliminar}" />
						
					</h:panelGrid>
					<s:div styleClass="clear-it" />
					<h:outputText value="#{messages['bands.edit.other']}"
						styleClass="title color-green" />
					<h:panelGrid styleClass="panel border-color-green" columns="4">
						
						<h:outputText value="#{messages['bands.edit.email']}" />
						<h:inputText value="#{gruposAction.grupo.email}" />
						
						<h:outputText value="#{messages['bands.edit.web']}" />
						<h:inputText value="#{gruposAction.grupo.web}" />
						
						<h:outputText value="#{messages['bands.edit.facebook']}" />
						<h:inputText value="#{gruposAction.grupo.facebook}" />
						
						<h:outputText value="#{messages['bands.edit.twitter']}" />
						<h:inputText value="#{gruposAction.grupo.twitter}" />
						
					</h:panelGrid>
				</a:outputPanel>
	
				<div class="clear-it"></div>
			</s:decorate>
			
			<s:decorate template="/layout/buttonbar.xhtml">
				<a:commandButton value="#{messages['bands.actions.new']}" actionListener="#{gruposAction.nuevo()}"
					styleClass="btn btn-green" rendered="#{(usuario.perfil.administrador or usuario.perfil.gruposCrear) and gruposAction.listarGrupos}" reRender="base" />
				<a:commandButton value="#{messages['bands.actions.save']}" actionListener="#{gruposAction.guardarNuevoGrupo()}" styleClass="btn btn-green" 
					rendered="#{(usuario.perfil.administrador or usuario.perfil.gruposCrear) and gruposAction.editarGrupo and gruposAction.grupo.id == null}" reRender="base" />
				<a:commandButton value="#{messages['bands.actions.save.changes']}" actionListener="#{gruposAction.guardarModificacionGrupo()}" styleClass="btn btn-green" 
					rendered="#{(usuario.perfil.administrador or usuario.perfil.gruposModificar) and gruposAction.editarGrupo and gruposAction.grupo.id != null}" reRender="base" />
				<a:commandButton value="#{messages['bands.actions.members']}" styleClass="btn btn-pink tiny-font" reRender="membersPanelDiv" action="#{componentesAction.cargarUsuarios()}"
					rendered="#{(usuario.perfil.administrador or usuario.perfil.componentesCrear) and gruposAction.grupo.id != null and gruposAction.editarGrupo and gruposAction.grupo.baja == null}">
					<f:setPropertyActionListener target="#{componentesAction.grupo}" value="#{gruposAction.grupo}" />
				</a:commandButton>
				<h:commandButton value="#{messages['bands.actions.list']}" styleClass="btn btn-pink tiny-font" 
					rendered="#{gruposAction.listarGrupos}" action="#{gruposReport.listado()}">
					<f:setPropertyActionListener target="#{gruposReport.grupos}" value="#{gruposAction.grupos}" />
				</h:commandButton>
				<a:commandButton value="#{messages['bands.actions.cancel']}" styleClass="btn btn-orange" reRender="base"
					rendered="#{gruposAction.editarGrupo}" actionListener="#{gruposAction.volver()}" />
				<h:commandButton value="#{messages['bands.actions.back']}"
					action="/menu.htm" styleClass="btn btn-blue" />
			</s:decorate>
		</h:form>
		<s:div id="membersPanelDiv">
			<rich:modalPanel id="membersPanel" showWhenRendered="true" width="850" height="400" rendered="#{componentesAction.showMemberPanel}">
				<f:facet name="header">
                    <h:outputText value="#{messages['bands.edit.members.title']}" style="padding-right: 15px;" />
                </f:facet>
                <f:facet name="controls">
                    <h:panelGroup>
						<h:form>
	                        <h:graphicImage value="/img/icons/16/cross.png" styleClass="hide-link" id="closeMembersPanel">
	                        	<a:support action="#{componentesAction.hideMemberPanel()}" event="onclick" />
	                        </h:graphicImage>
	                        <rich:componentControl for="membersPanel" attachTo="closeMembersPanel" operation="hide" event="onclick" />
						</h:form>
                    </h:panelGroup>
                </f:facet>
				<h:form id="membersTableForm">
                	<s:div styleClass="clear-it" />
					<rich:panel styleClass="modal-panel-table border-color-pink">
						<rich:dataTable columnClasses="data-table-cell" id="membersTable"
							value="#{componentesAction.componentes}" styleClass="data-table"
							var="item" rows="5">
							<rich:column filterBy="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}">
								<f:facet name="header">
									<h:outputText value="#{messages['bands.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.edit.members.registration.date']}" />
								</f:facet>
								<rich:calendar value="#{item.alta}" datePattern="dd/MM/yyyy" inputSize="10" />
							</rich:column>
							<rich:column rendered="#{usuario.perfil.administrador or usuario.perfil.componentesEliminar}">
								<f:facet name="header">
									<h:outputText value="#{messages['bands.edit.members.leaving.date']}" />
								</f:facet>
								<rich:calendar value="#{item.baja}" datePattern="dd/MM/yyyy" inputSize="10" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.edit.members.instrument']}" />
								</f:facet>
								<h:inputText value="#{item.actividad}"  />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.edit.members.representative']}" />
								</f:facet>
								<h:selectBooleanCheckbox value="#{item.representante}">
									<a:support action="#{componentesAction.checkRepresentante(item)}" event="onclick" reRender="membersTableForm" />
								</h:selectBooleanCheckbox>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['bands.edit.members.actions']}" />
								</f:facet>
								<h:selectBooleanCheckbox value="#{componentesAction.selected[item]}">
									<a:support action="#{componentesAction.checkMember(item)}" event="onchange" reRender="membersTableForm" />
								</h:selectBooleanCheckbox>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
	
					<rich:datascroller for="membersTable" align="center"
						selectedStyleClass="border-color-pink color-pink"
						styleClass="top-margin" tableStyleClass="border-color-pink no-bg" />
					
					<s:div styleClass="center top-margin">
						<a:commandButton value="#{messages['bands.edit.members.actions.add']}" actionListener="#{componentesAction.guardarComponentes()}" reRender="membersPanelDiv"
							styleClass="btn btn-pink" rendered="#{usuario.perfil.administrador or usuario.perfil.componentesCrear}" />
					</s:div>
				</h:form>
			</rich:modalPanel>
		</s:div>
	</ui:define>
	
</ui:composition>
